<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<!-- themeleaf 引入通用的评论页面 片段-->
<!--提交评论的form-->
<div th:fragment="commentForm" class="comments-form" id="main-comment">
    <div class="comments-form-left">
        <img th:if="${session.principal == null}" class="img-circle"
             th:src="@{/assets/img/avatar-default.png}"/>
        <img th:if="${session.principal}" class="img-circle" th:src="${session.principal.avatar}"/>
        <div th:if="${session.principal}" class="text-primary" th:text="${session.principal.nickname}">狂徒张三</div>
    </div>
    <div class="comments-form-right">
        <!-- 绑定当前文章的id-->
        <textarea autoheight="true" id="mainTextArea" th:attr="data-id=${id}" placeholder="请输入你的留言..."></textarea>
        <div class="comments-form-right-footer">
            <button th:if="${session.principal}" class="btn btn-info btn-xs comments-submit"
                    data-replay="0" data-atid="0">提交评论
            </button>
            <button th:if="${session.principal==null}" class="btn btn-default btn-xs" disabled>请先登录</button>
        </div>
    </div>

    <div class="clearfix"></div>
</div>

<hr/>
<!--主评论列表-->
<div th:fragment="commentList" class="comments-box">
    <div th:each="data:${pager.datas}" class="comments-item">
        <div class="comments-item-left">
            <img class="img-circle" th:src="${data.avatar}"/>
        </div>
        <div class="comments-item-right">
            <div class="comments-item-right-header">
                <strong class="text-info" th:text="${data.nickname}">张三</strong><small class="text-muted">发表于</small>
                <span th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span>
            </div>
            <div class="comments-item-right-content">
                <p th:text="${data.content}"></p>
            </div>
            <div class="comments-item-right-footer">
                <!--主评论的 回复的replyId = 当前id; atId=当前id-->
                <a th:if="${session.principal}" class="btn-link btn-xs replay"
                   th:attr="data-reply=${data.id},data-atid=${data.id}">回复</a>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="comments-sub-box">
            <!-- 评论的回复 列表（子评论列表） -->
            <div class="comments-sub-item" th:if="${data.subComments}"
                 th:each="sub:${data.subComments.datas}">
                <div class="comments-item-left">
                    <img class="img-circle" th:src="${sub.avatar}"/>
                </div>
                <div class="comments-item-right">
                    <div class="comments-item-right-header">
                        <strong class="text-info" th:text="${sub.nickname}">张三</strong><small
                            class="text-muted">发表于</small>
                        <span th:text="${#dates.format(sub.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span>
                    </div>
                    <div class="comments-item-right-content">
                        <p th:text="${sub.content}"></p>
                    </div>
                    <div class="comments-item-right-footer">
                        <!--回复的 回复的replyId = 当前replyId; atId=当前id-->
                        <a th:if="${session.principal}" class="btn-link btn-xs replay"
                           th:attr="data-reply=${sub.replyId},data-atid=${sub.id}">回复</a>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>

            <div th:if="${data.subComments != null and data.subComments.hasMore}"
                 th:attr="data-page=${data.subComments.page +1},data-id=${data.id}"
                 class="load-more">
                加载更多
            </div>
        </div>


    </div>
</div>
